<template>
  <div class="my-device">
    <!--  不存在数据  -->
    <div v-if="false">
      <null-device></null-device>
    </div>
    <!--  存在数据 -->
    <div v-else>
      <div class="add-device-btn" @click="redirectBind">
        <van-icon size="30" name="add-o" color="#1989fa"/>
        <span>添加设备</span>
      </div>
      <device-list :data-list="dataList"></device-list>
    </div>
  </div>
</template>
<script>
  import NullDevice from "@/components/NullDevice";
  import DeviceList from "@/components/DeviceList";

  export default {
    data() {
      return {
        dataList: []
      };
    },
    components: {
      NullDevice,
      DeviceList
    },
    mounted() {
      this.loadDevice();
    },
    methods: {
      formatDate(date) {
        return `${date.getMonth() + 1}/${date.getDate()}`;
      },
      onConfirm(date) {
        this.show = false;
        this.date = this.formatDate(date);
      },
      scannerQr() {
        this.$wechat.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            alert('扫码返回值：' + result)
          }
        });
      },
      getRegion() {
        this.$wechat.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
            // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            // var speed = res.speed; // 速度，以米/每秒计
            // var accuracy = res.accuracy; // 位置精度
            alert('地址位置信息->' + JSON.stringify(res));
          }
        });
      },
      openMap() {
        this.$wechat.openLocation({
          latitude: 0, // 纬度，浮点数，范围为90 ~ -90
          longitude: 0, // 经度，浮点数，范围为180 ~ -180。
          name: '', // 位置名
          address: '', // 地址详情说明
          scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
          infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
        });
      },
      loadDevice() {
        let that = this;
        let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
        let id = cook.userInfo.id;
        let param = {
          userId: id,
          userType: 2
        };
        that.$http.restPost('/findUserDeviceList.do', param).then(response => {
          let data = response.data;
          let appUserDevice = data.AppUserDevice;
          if (appUserDevice) {
            if (appUserDevice.length > 0) {
              for (let i = 0; i < appUserDevice.length; i++) {
                let deviceCode = appUserDevice[i].deviceCode;
                let deviceName = appUserDevice[i].deviceName;
                that.dataList.push({id: deviceCode, deviceInfo: deviceName});
              }
            } else {
              //设备列表为。跳转到设备绑定
              location.href = 'binddevice.html';
            }
          }
        })
      },
      //跳转到绑定
      redirectBind() {
        location.href = 'binddevice.html';
      }
    },
  }
</script>
<style lang="css" scoped>
  /* ⬇ 绑定div ⬇ */
  .bind-div {
    margin-top: 200px;
  }

  .bind-div > :first-child {
    margin-bottom: 53px;
  }

  /* ⬇ 扫一扫样式 ⬇ */
  .scan-qr-code-bind {
    width: 100%;
    height: 40px;
    border-radius: 40px;
  }

  /* ⬇ 手动输入样式 ⬇ */
  .hand-input-bind {
    width: 100%;
    height: 40px;
    border-radius: 40px;
  }

  /* 添加设备按钮 */
  .add-device-btn {
    position: fixed;
    left: 4%;
    top: 5%;
    line-height: 30px;
  }

  .add-device-btn :first-child {
    line-height: 15px;
    vertical-align: middle;
  }

  .add-device-btn span {
    font-size: 15px;
    line-height: 15px;
    vertical-align: middle;
    color: #1989fa;
    margin-left: 5px;
  }

</style>
